<template>
  <div>
    <form @submit.prevent="rangeform">
      <div class="basic-content">
        <div class="form-group">
          <h4 class="card-title">基础信息</h4>
        </div>
        <div class="form-group">
          <label for="productname">招投标站点名称</label>
          <b-form-input
            for="text"
            v-model="basicContent.name"
            placeholder="招投标站点名称*(必填)"
            :class="{
              'is-invalid': submit && $v.basicContent.name.$error,
            }"
          ></b-form-input>
          <div
            v-if="submit && $v.basicContent.name.$error"
            class="invalid-feedback"
          >
            <span v-if="!$v.basicContent.name.required"
              >该值是必需的。</span
            >
            <span v-if="!$v.basicContent.name.minLength"
              >这个值太短了。它应该有 6 个字符或更多。</span
            >
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <label for="price">招投标网站类型</label>
              <multiselect
                v-model="value1"
                :options="options"
                placeholder="请选择招投标网站类型"
                :class="{
                  'is-invalid': submit && $v.value1.$error,
                }"
              ></multiselect>
              <div v-if="submit && $v.value1.$error" class="invalid-feedback">
                <span v-if="!$v.value1.required">该值是必须选择的。</span>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="manufacturerbrand">招投标站点地址</label>
              <b-form-input
                for="text"
                v-model="basicContent.address"
                placeholder="招投标站点网址*(必填)"
                :class="{
                  'is-invalid': submit && $v.basicContent.address.$error,
                }"
              ></b-form-input>
              <div
                v-if="submit && $v.basicContent.address.$error"
                class="invalid-feedback"
              >
                <span v-if="!$v.basicContent.address.required"
                  >该值是必需的。</span
                >
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <label for="price">客户标签</label>
              <multiselect
                v-model="value2"
                :options="options2"
                :multiple="true"
                placeholder="客户标签*(可添加多个)"
              ></multiselect>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">主办单位企业名称</label>
              <b-form-input
                for="text"
                value=""
                placeholder="主办单位企业名称"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="control-label">覆盖范围</label>
              <multiselect
                v-model="value3"
                :options="options3"
                placeholder="覆盖范围"
              ></multiselect>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="productdesc">招投标平台介绍</label>
          <textarea
            v-model="extendInfo.textarea"
            class="form-control"
            name="textarea"
            rows="6"
            placeholder="招投标平台介绍"
          ></textarea>
        </div>
      </div>
      <div class="form-group mb-0">
        <div style="width: 400px; margin: 0 auto">
          <b-button
            type="submit"
            class="btn btn-primary"
            variant="success"
            @click="makeToast('success')"
            >提交数据</b-button
          >
          <button type="submit" @click="todetail" class="btn btn-primary" style="float: right">
            添加种子
          </button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import { required, minLength } from "vuelidate/lib/validators";
import Multiselect from "vue-multiselect";
export default {
  validations: {
    basicContent: {
      name: { required, minLength: minLength(6) },
      address: { required },
    },
    value1: { required },
  },
  components: {
    Multiselect,
  },
  data () {
    return {
      submit: false,
      // 下拉框选项
      options: ["综合型招投标网站", "部级政府采购平台", "部级公共资源交易平台", "省级公共资源交易平台", "省级政府采购平台", "市级公共资源交易平台", "市级政府采购平台", "高校采购平台", "医院采购平台", "集团企业采购平台", "行业招投标网站", "军队招投标网站", "医药招投标网站"],
      options2: ["客户一", "客户二", "客户三"],
      options3: ["全国", "省级", "市级", "区县", "行业"],
      value1: null,
      value2: null,
      value3: null,
      extendInfo: {
        textarea: "",
      },
      // 基本信息
      basicContent: {
        name: "",
        address: "",
      },
    }
  },
  methods: {
    rangeform() {
      this.submit = true;
      // stop here if form is invalid
      this.$v.$touch();
    },
    makeToast(variant = null) {
      this.$router.push('/seed')
      this.$bvToast.toast("Toast body content", {
        title: `Toast ${variant || "default"}`,
        variant: variant,
        solid: true,
      });
    },
    todetail(){
      this.$router.push('/spider/siteDetail')
    },
  },
}
</script>
<style lang="scss" scoped>
label{
  font-weight: normal;
}
</style>
